<template>
	<view>
		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">乘车人信息</view>
					<view class="r-wrap"></view>
				</view>
				<!-- 当前选择乘车人列表S -->
				<view class="rider_list">
					<view class="rider_item" v-for="(it_r,in_r) in riderList" :key="in_r">
						<view class="info-wrap">
							<view class="l-wrap">
								<text class="name ellispsis1">{{it_r.passageName}}</text>
								<text class="type">{{it_r.passageType}}</text>
								<text class="ID">{{it_r.passageNumber}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前选择乘车人列表E -->
			</view>
		</view>

		<!-- 支付明细S -->
		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">支付明细</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list">
					<view class="service_item" v-for="(it_n, in_i) in otherList" :key="in_i">
						<text class="name">{{it_n.name}}</text>
						<text class="price">￥{{it_n.price}}</text>
					</view>
					<view class="service_item">
						<text class="name">人数</text>
						<text class="price">{{riderList.length}}人</text>
					</view>

					<!-- <view class="input-wrap" @click="handleGoBusCouponList">
						<view class="type">优惠券</view>
						<view class="input">
							<input disabled type="text" :value="choosedBusCoupon.id ? (choosedBusCoupon.useScene ==1 ? `满${choosedBusCoupon.fullAmount}减${choosedBusCoupon.amount}` : `减${choosedBusCoupon.amount}`) : ''"
							 :placeholder="integralPlacholde" />
							<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
						</view>
					</view>
					<view class="input-wrap">
						<view class="type">积分抵扣</view>
						<view class="input">
							<input type="number" :disabled="integral==0" v-model="usedIntegral" :placeholder="`最多可用${integral}积分`" @input="handleWatchUseIntegral" />
						</view>
					</view> -->

					<view class="service_item">
						<text class="name">实付款</text>
						<text class="price">￥{{totalMoney}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付明细E -->

		<view class="submit-btn">
			<view class="price-wrap">
				<text>总价：</text>
				<text class="price">￥{{totalMoney || 0}}</text>
			</view>
			<view class="r-wrap">
				<view class="btn" @click="handleSubmitOrder">支付</view>
			</view>
		</view>

		<CommonPay ref="commonPay" :price="totalMoney" @payMoney="payMoney"></CommonPay>

	</view>
</template>

<script>
	import CommonPay from '@/components/common/common-pay.vue'
	export default {
		components: {
			CommonPay
		},
		data() {
			return {
				orderId: '',
				riderList: [],
				otherList: [],
				exchangeRate: '', // 积分兑换汇率
				integral: 0, // 个人总积分
				usedIntegral: '', // 使用的积分
				couponList: [],
				type: 1, // 根据type请求相应的优惠券列表  类型 1.大巴单程 2.大巴往返 3.拼车 4.包车 5.租车
			};
		},
		onLoad(opt) {
			this.orderId = opt && opt.orderId
			this.type = opt && opt.type
			this.getInsuranceDetail()
		},
		computed: {
			totalMoney() {
				let money = -this.usedIntegral
				this.otherList.forEach(item => {
					money += Number(item.price) * 100
				})
				
				money = this.riderList.length * money

				return money / 100 >= 0 ? money / 100 : 0
			},
			integralPlacholde() { // 积分选择提示
				return this.couponList.length === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
		},
		methods: {
			handleWatchUseIntegral(e) { // 监听用户输入的积分
				console.log(e.detail.value > this.integral);
				if (e.detail.value > this.integral) {
					setTimeout(() => {
						this.usedIntegral = this.integral
					}, 100)
				}
			},
			getBusCouponList() { // 获取班车优惠券列表
				this.$http.get(this.$api.getCouponList + `?type=1&totalPrice=${this.totalMoney}`).then(res => {
					if (res.code === 200) {
						this.couponList = res.data
					}
				})
			},
			handleGoBusCouponList() { //跳转到班车优惠券列表
				if (!this.couponList.length) return
				uni.navigateTo({
					url: '../../pagesTravel/bus.couponList'
				});
			},
			payMoney(pwd) {
				let arr = []
				 this.otherList.forEach(item => {
					arr.push(item.id)
				})
				let insuranceIds = arr.join(','),
				serverIds = '',couponId = '-1',balance = '0'
				
				this.$http.post(this.$api.payServiceMoney, {
					orderNo: this.orderId,
					insuranceIds: insuranceIds,
					serverIds: serverIds,
					couponId: couponId,
					balance: balance,
					payWord: pwd,
					money: this.totalMoney.toString()
				}).then(res => {
					if (res.code === 200) {
						this.getInsuranceDetail()
						this.$refs.commonPay.close()
					}
				})
			},
			handleSubmitOrder() {
				this.$refs.commonPay.show()
			},
			getInsuranceDetail() {
				this.$http.get(this.$api.insuranceDetail, {
					orderNo: this.orderId
				}).then(res => {
					if (res.code === 200) {
						this.riderList = res.data.passenger
						this.otherList = [...res.data.insuList]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-wrap {
		margin-top: 20rpx;

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.rider_list {
				// height: 262rpx;
				overflow: hidden;
				transition: all 0.3s ease;

				.rider_item {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding: 40rpx 0;
					border-bottom: 1px solid #ebebeb;

					&:last-child {
						border: none;
					}

					.info-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.l-wrap {
							display: flex;
							align-items: center;
							font-size: 28rpx;

							.name {
								font-size: 30rpx;
								padding: 0 10rpx 0 0;
								width: 120rpx;
								font-weight: bold;
							}

							.type {
								padding-right: 40rpx;
							}
						}

						.price {
							color: $red;
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.site-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
						color: #666;
						margin-top: 26rpx;

						.code-img {
							height: 32rpx;
							width: 32rpx;
							background-color: pink;
						}
					}

					.btns-wrap {
						margin-top: 20rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.txt {
							color: $blue;
						}

						.btns {
							display: flex;
							justify-content: flex-end;

							.btn {
								min-width: 100rpx;
								height: 48rpx;
								line-height: 48rpx;
								text-align: center;
								border-radius: 12rpx;

								&.back {
									border: 1px solid $blue;
									color: $blue;
								}

								&.edit {
									border: 1px solid $yellow;
									color: $yellow;
									margin-left: 20rpx;
								}

								&.disabled {
									border: 1px solid transparent;
									background-color: #eaeaea;
									color: #999999;
								}

								&.back_reason {
									border: 1px solid transparent;
									color: $yellow;
									margin-right: 20rpx;
								}
							}
						}
					}
				}
			}

			.service_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.service_item {
					font-size: 30rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;

					&:last-child {
						border-bottom: none;
					}
				}
			}

			.more_rider {
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
				color: #999;
				border-top: 1px solid #ebebeb;
			}
		}
	}

	.submit-btn {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #fff;
		height: 98rpx;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;

		.price-wrap {
			flex: 1;
			display: flex;
			align-items: center;

			.price {
				color: $red;
				font-size: 36rpx;
				margin-left: 24rpx;
			}
		}

		.r-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.detail-btn {
				display: flex;
				align-items: center;
			}

			.arrow-icon {
				margin: 0 40rpx 0 16rpx;
			}

			.btn {
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: $yellow;
				border-radius: 12rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.input-wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		font-size: 30rpx;

		&:last-child {
			border: none;
		}

		.l-wrap {
			display: flex;
			align-items: center;

			.icon {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;
			}

			.terms {
				color: $blue;
			}
		}

		.ul_service {
			display: flex;

			.li_service {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				margin-left: 80rpx;

				.txt {
					margin-left: 20rpx;
				}
			}
		}

		.type {
			font-size: 30rpx;
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			display: flex;

			input {
				padding-right: 6rpx;
			}
		}
	}
</style>
